<div class="wrapper-bz-page">
    <div class="wrapper-bz-body">
        <div class="column-block block-left" style="width:500px;">
            <div class="column-title">页面</div>
            <div class="column-content">
                <div class="column-filter">

                </div>
                <div class="column-datagrid">
                    <table id="table_poem_clockin_activity_in_add_clockin_activity_plan" style="width:100%;height:100%"></table>
                </div>
            </div>
        </div>
        <div class="column-block block-right" style="left:510px;">
            <div class="column-title">打卡活动计划安排</div>
            <div class="column-content">
                <div class="column-filter">

                </div>
                <div class="column-datagrid">
                    <div id="table_poem_clockin_activity_plan_calendar_in_add_clockin_activity_plan" style="width:100%;height:100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="dialog_add_poem_clockin_activity_plan_calendar_in_add_clockin_activity_plan"></div>
<div id="dialog_edit_poem_clockin_activity_plan_calendar_in_add_clockin_activity_plan"></div>
<script>
    $(function () {
        var subject_1 = "poem_clockin_activity_in_add_clockin_activity_plan";
        var subject_2 = "poem_clockin_activity_plan_calendar_in_add_clockin_activity_plan";
        //列表-对话框-表单
        var tableId_1 = '#table_' + subject_1;
        var tableId_2 = '#table_' + subject_2;

        var tableObject_1 = $(tableId_1);
        var tableObject_2 = $(tableId_2);
        var addDialogId_2 = '#dialog_add_' + subject_2;

        var paramDataAdd_2 = {};
        var paramDataEdit_2 = {};

        var selectLeftMainId = 0;
        var dataActivityPlanByMonth = [];
        var configDialogAdd_2 = {
            href: '/admin/ClockinActivityPlan/pageListPoem',
            title: '诗词打卡计划安排',
            queryParams: {},
            width: dialogTwoColumnWidth,
            height: dialogDefaultHeight,
            modal: true,
            buttons: [{
                text: '<i class="fa fa-check fa-btn-cls" style="color:green"></i>保存',
                plain: true,
                handler: function () {
                    paramDataAdd_2 = $(addFormId_2).serializeObject();
                    paramDataAdd_2 = $.extend(paramDataAdd_2, {page_id: selectLeftMainId});
                    console.log(paramDataAdd_2);
                    if (!paramDataAdd_2.column_name) {
                        layer.msg("请填写列标识码");
                        return;
                    }
                    if (!paramDataAdd_2.column_title) {
                        layer.msg("请填写列名");
                        return;
                    }
                    var loading = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    $.ajax({
                        url: '/api/PageColumn/createPageColumn',
                        async: false,
                        dataType: 'json',
                        type: 'post',
                        data: paramDataAdd_2,
                        success: function (resp) {
                            layer.close(loading);
                            if (1 == resp.code) {
                                $(addDialogId_2).dialog('close');
                                $(tableId_2).datagrid('reload');
                            } else {
                                layer.msg(resp.message);
                            }
                        }
                    });
                }
            }, {
                text: '<i class="fa fa-times fa-btn-cls" style="color:red"></i>取消',
                plain: true,
                handler: function () {
                    $(editDialogId).dialog('close');
                }
            }]
        };
        var configDialogEdit = {
            href: 'role/edit',
            title: '修改角色',
            queryParams: {},
            width: dialogDefaultWidth,
            height: dialogDefaultHeight,
            modal: true,
            buttons: [{
                text: '<i class="fa fa-check fa-btn-cls" style="color:green"></i>保存',
                plain: true,
                handler: function () {
                    paramDataEdit = $(editFormId).serializeObject();
                    console.log(paramDataEdit);
                    if (!paramDataEdit.role_name) {
                        layer.msg("请填写角色名称");
                        return;
                    }
                    var loading = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    $.ajax({
                        url: '/api/role/edit',
                        async: false,
                        dataType: 'json',
                        type: 'post',
                        data: paramDataEdit,
                        success: function (resp) {
                            layer.close(loading);
                            if (1 == resp.code) {
                                $(editDialogId).dialog('close');
                                $(tableId).datagrid('reload');
                            } else {
                                layer.msg(resp.message);
                            }
                        }
                    });
                }
            }, {
                text: '<i class="fa fa-times fa-btn-cls" style="color:red"></i>取消',
                plain: true,
                handler: function () {
                    $(editDialogId).dialog('close');
                }
            }]
        };

        var configDatagrid_1 = {
            url: '/api/ClockinActivity/getClockinActivityList',
            method: 'post',
            remoteSort: false,
            queryParams: {},
            pageList: [30, 50, 100],
            pageSize: 30,
            pagination: true,
            clickToEdit: false,
            dblclickToEdit: false,
            singleSelect: true,
            checkOnSelect: true,
            selectOnCheck: true,
            rownumbers: false,
            striped: true,
            fitColumns: true,
            fit: true,
            frozenColumns: [[
                {field: 'ck', title: 'ck', checkbox: true},
            ]],
            columns: [[
                {field: 'id', title: 'ID', width: 40, hidden: true},
                {field: 'activity_name', title: '活动名称', width: 100},
                // {field:'clockin_person_num',title:'打卡人数',width:100},
                // {field:'step_status',title:'进行状态',width:100},
            ]],
            loadFilter: function (data) {
                return loadFilter(data, true);
            },
            onSelect: function (index, row) {
                console.log("enter select row");
                selectLeftMainId = row.id;
                var nowDate = new Date();
                var nowFormatDate = nowDate.getFullYear() + "-" + (nowDate.getMonth() + 1);
                dataActivityPlanByMonth = getClockinActivityPlanByMonth(row.id, nowFormatDate);
                // tableObject_2.calendar(calendarConfig);
            },
            onCheck: function (index, row) {
            },
            onUncheck: function (index, row) {
            },
            rowStyler: function (index, row) {
                if (row.role_user_id > 0 && selectRoleId > 0) {
                    return 'background:#c6e9ff';
                }
            },
            onLoadSuccess: function () {
                tableObject_1.datagrid('selectRow', 0);
                $(".datagrid-header-check").html("");
            },
            toolbar: [
                {
                    text: '<i class="fa fa-refresh tool-button-refresh"></i> 刷新',
                    plain: true,
                    handler: function () {
                        tableObject_1.datagrid('reload');
                    }
                }
            ]

        };



        var calendarConfig = {                                  //初始化日历
            header: { 　　　　　　　　　　　　　　　　　　　　//日历最上面表示头部
                left: 'prev,next today', 　　　　　　　　　//左边是 前一月/周/日，后一月/周/日  以及  回到今天按钮
                center: 'prevYear,title,nextYear', 　　　//中间是  去年的本月/周/日  当前试图的时间   明年的本月/周/日
                right: 'month,agendaWeek,agendaDay' 　　//切换日历显示月/周/日视图
            },
            monthNames: ["一月", "二月", "三月", "四月", 　//设置月份名称，中英文均可
                "五月", "六月", "七月", "八月", "九月",
                "十月", "十一月", "十二月"
            ],
            monthNamesShort: ["一月", "二月", "三月", 　　//设置月份的简称
                "四月", "五月", "六月", "七月", "八月",
                "九月", "十月", "十一月", "十二月"
            ],
            dayNames: ["周日", "周一", "周二", "周三", 　　//设置星期名称
                "周四", "周五", "周六"
            ],
            dayNamesShort: ["周日", "周一", "周二", 　　　　//设置星期简称
                "周三", "周四", "周五", "周六"
            ],
            today: ["今天"], 　　　　　　　　　　　　　　　　//today 按钮的显示名称
            firstDay: 0, 　　　　　　　　　　　　　　　　　　//设置每星期的第一天是星期几，0 是星期日
            buttonText: { 　　　　　　　　　　　　　　　　　//设置按钮文本
                today: '今天',
                month: '月',
                week: '周',
                day: '日',
                prev: '上一月',
                next: '下一月'
            },
            height: 800, 　　　　　　　　　　　　//设置日历高度，宽度是自适应的，不好改，windowHeight 是我计算的值
            currentTimezone: 'Asia/Beijing', 　　　　　　//设置时区
            theme: true, 　　　　　　　　　　　　　　　　　//true 时日历主题可随 jQuery ui 的主题变化
            selectable: true, 　　　　　　　　　　　　　　//元素是否可以被选中
            selectHelper: true, 　　　　　　　　　　　　　//选中元素时是否显示相关信息
            select: function(startDate, endDate,allDay, jsEvent, view) {  　　　//选中某元素的方法，startDate 事项的起始时间，endDate 事项的结束时间
                console.log("start date:", startDate);　　　        　　　　　
                console.log("end date:", endDate);　　　        　　　　　
                // allDay 事项是否为全天事项，jsEvent 控件的内置对象，view 当前视图
                var startD = $.fullCalendar
                    .formatDate(startDate,
                        'yyyy-MM-dd HH:mm:ss'); 　　　　//formatDate 是格式化时间的方法
                var endD = $.fullCalendar
                    .formatDate(endDate,
                        'yyyy-MM-dd HH:mm:ss');
                //TODO      添加选中某元素时需要进行操作的方法，比如：添加会议、备注等事项
            },
            eventClick: function(event) { 　　　　　　　　//点击事项的方法
                var startD = $.fullCalendar
                    .formatDate(event.start,
                        'yyyy-MM-dd HH:mm:ss');
                var endD = $.fullCalendar
                    .formatDate(event.end,
                        'yyyy-MM-dd HH:mm:ss');
                //TODO      添加点击某事项时需要进行操作的方法，比如：修改会议、备注等事项
            },
            editable: true, 　　　　　　　　　　　　　　　　//事项是否可编辑，改变大小、拖拽等
            eventResize: function(event, dayDelta, minuteDelta, revertFunc) { 　　　　　　　　　　　　//事项大小改变后的方法，往往修改事项的起止时间，event 改变的事项，dayDelta 变化的天数，minuteDelta 变化的分钟数，revertFunc 回调函数
                var startD = $.fullCalendar
                    .formatDate(event.start,
                        'yyyy-MM-dd HH:mm:ss');
                var endD = $.fullCalendar
                    .formatDate(event.end,
                        'yyyy-MM-dd HH:mm:ss');

                //TODO      添加改变某事项大小时需要进行操作的方法，比如：修改会议、备注等事项

                if (!confirm("is this okay?")) {
                    revertFunc();        　　　　　　　　//如果不要改变，则将事项还原
                }

            },
            eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {    //拖拽事项之后的方法，allDay 是否全天事项，其他参数同上
                var startD = $.fullCalendar
                    .formatDate(event.start,
                        'yyyy-MM-dd HH:mm:ss');
                var endD = $.fullCalendar
                    .formatDate(event.end,
                        'yyyy-MM-dd HH:mm:ss');

                //TODO      添加拖拽某事项之后需要进行操作的方法，比如：修改会议、备注等事项

                if (!confirm("is this okay?")) {
                    revertFunc();
                }

            },
            events: function(start, end, callback) {
                //获取事项的数据，这里是用的 function ，可以是 array ，也可以是 json
            }
        };
        tableObject_1.datagrid(configDatagrid_1);
        const calendarEl = document.getElementById('table_poem_clockin_activity_plan_calendar_in_add_clockin_activity_plan')
        const calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            locale: 'zh',
            fixedWeekCount: false,
            headerToolbar:{
                start:'today',
                center:'title',
                end: 'prevYear,prev,next,nextYear'
            },
            buttonText:{
                today:'今天'
            },
            resources: [
                {
                    title: 'All Day Event',
                    id: '2024-09-03'
                },
                {
                    title: 'Long Event',
                    id: 'b',
                }
            ],
            events: [
                {
                    title  : 'event1',
                    start  : '2024-09-17',
                    end    : '2024-09-17'
                },
                {
                    title  : 'event2',
                    start  : '2010-01-05',
                    end    : '2010-01-07'
                },
                {
                    title  : 'event3',
                    start  : '2010-01-09T12:30:00',
                    allDay : false // will make the time show
                }
            ]
        });
        calendar.render();

        //tableObject_2.fullCalendar(calendarConfig);

        // SearchCombobox('search_input_user_in_role','table_user_in_role',function (val,name) {
        //     configDatagrid_1.queryParams = {};
        //     configDatagrid_1.queryParams[name] = val;
        //     if(selectRoleId){
        //         configDatagrid_1.queryParams['role_id'] = selectRoleId;
        //     }
        //     tableObject_1.datagrid(configDatagrid_1);
        // },['ck','ID']);

        function getCheckedRowData(opText) {
            var checkList = tableObject.datagrid('getChecked');
            if (checkList.length < 1) {
                layer.msg('请选择要' + opText + '的数据');
                return false;
            }
            return checkList;
        }

        function getCheckedRowData_1(opText) {
            var checkList = tableObject_1.datagrid('getChecked');
            if (checkList.length < 1) {
                layer.msg('请选择要' + opText + '的数据');
                return false;
            }
            return checkList;
        }

        function getClockinActivityPlanByMonth(clockinActivityId, planMonth) {
            var planData = [];
            $.ajax({
                url: '/api/ClockinActivityPlan/getClockinActivityPlanListByMonth',
                async: false,
                type: 'post',
                data: {clockin_activity_id: clockinActivityId, plan_month: planMonth},
                success: function (resp) {
                    if (1 == resp.code) {
                        $.each(resp.data, function(index, planItem){

                        })
                    }
                }
            });
            return optionData;
        }

        // $(document).on("click", ".calendar-prevmonth", function(){
        //     console.log("click last month");
        //     var curDate = tableObject_2.calendar('options').firstDay;
        //     console.log("now date:", curDate);
        // });

    });


</script>
